<template>
  <div class="caseMalfeasance">
    <div class="header-1">
      <div class="header-1-1">
        <div class="tou"></div>
        <span>查询条件</span>
      </div>
    </div>
    <!-- 筛选 -->
    <el-form
      style="font-size: 12px; display: flex"
      size="mini"
      label-width="80px"
      :data="Thequery"
      :model="Thequery"
      class="invoice"
    >
      <el-form-item size="mini" label="工单号">
        <el-input style="width: 100px" v-model="Thequery.caseId"></el-input>
      </el-form-item>
      <el-form-item size="mini" label="状态">
        <el-select
          clearable
          v-model="Thequery.caseStatus"
          size="mini"
          placeholder="请选择"
          style="width: 120px"
        >
          <el-option
            v-for="item in condition"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="mini" label="时间范围">
        <el-date-picker
          :value-format="format"
          size="mini"
          style="width: 140px"
          v-model="CX.date1"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
        <span class="invoice-9">至 </span>
        <el-date-picker
          :value-format="format"
          size="mini"
          style="width: 140px"
          v-model="CX.date2"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item size="mini" label="订单号">
        <el-input
          onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
          style="width: 120px"
          size="mini"
          v-model="Thequery.orderId"
        ></el-input>
      </el-form-item>
      <el-form-item size="mini" label="工单类型">
        <el-select
          clearable
          v-model="Thequery.orderType"
          size="mini"
          placeholder="请选择"
          style="width: 120px"
        >
          <el-option
            v-for="item in mold"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <div>
        <el-button
          style="color: #fff; width: 60px"
          size="mini"
          type="primary"
          @click="getbackGuaranteeCaseById"
          >查询</el-button
        >
        <el-button
          type="primary"
          style="color: #fff; width: 60px"
          size="mini"
          @click="centerDiaadde"
          >新增</el-button
        >
      </div>
    </el-form>
    <el-form
      style="margin-left: 50px; font-size: 12px"
      size="mini"
      :inline="true"
      :data="Thequery"
      :model="Thequery"
      class="invoice"
    >
      <!-- <div class="invoice-1">
          <span class="invoice-9">手机号</span>
          <el-input
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            style="width: 120px"
            v-model="Thequery.phone"
            size="mini"
          ></el-input>
        </div> -->
      <!-- <div class="invoice-1">
          <span class="invoice-9">会员id</span>
          <el-input
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            style="width: 120px"
            v-model="Thequery.customerId"
            size="mini"
          ></el-input>
        </div> -->
    </el-form>
    <!-- 表格 -->
    <div class="header-1">
      <div class="tuo">
        <div class="tuo-1">
          <div class="tuo-2"></div>
          <span>工单列表</span>
        </div>
      </div>
      <!-- 订单列表 -->
      <div class="table">
        <el-table
          border
          size="mini"
          ref="multipleTable"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          :row-style="{ height: '40px' }"
          style="width: 100%"
          :data="Therepairorder"
        >
          <el-table-column prop="caseId" label="工单号" width="100">
          </el-table-column>
          <el-table-column prop="caseType" label="工单类型" width="130">
            <template slot-scope="scope">
              <template
                v-for="(item, index) in workOrderType"
                v-if="scope.row.caseType == item.value"
              >
                {{ item.label }}
              </template>
            </template>
            <!-- <template slot-scope="scope">
              <template v-if="scope.row.orderType == 'hotel'">酒店</template>
              <template v-if="scope.row.orderType == 'flight'">机票</template>
              <template v-if="scope.row.orderType == 'service'"
                >贵宾厅</template
              >
              <template v-if="scope.row.orderType == 'train'">火车票</template>
              <template v-if="scope.row.orderType == 'customer'">会员</template>
            </template> -->
          </el-table-column>
          <el-table-column prop="caseSubject" label="工单标题">
          </el-table-column>
          <el-table-column prop="caseContent" label="工单内容">
          </el-table-column>
          <el-table-column prop="createEmployeeName" label="创建人" width="100">
          </el-table-column>
          <el-table-column prop="deptName" label="创建部门" width="100">
          </el-table-column>
          <el-table-column prop="caseCreateTime" label="创建时间" width="120">
          </el-table-column>
          <el-table-column prop="orderType" label="订单类型" width="120">
            <template slot-scope="scope">
              <template
                v-for="(item, index) in mold"
              
              >
               <template   v-if="scope.row.orderType == item.value">
                {{ item.label }}
               </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="订单号" width="150">
          </el-table-column>

          <!-- <el-table-column
            prop="receivingDepartment"
            label="接收部门"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="receivePost" label="接收岗位" width="100">
          </el-table-column>
          <el-table-column prop="receiver" label="接收人员" width="120">
          </el-table-column> -->
          <el-table-column prop="pri" label="紧急" width="70">
            <template slot-scope="scope">
              <template>
                {{ scope.row.pri == "0" ? "普通" : "紧急" }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="caseStatus" label="状态" width="80">
            <template slot-scope="scope">
              <template>
                {{
                  scope.row.caseStatus == "1"
                    ? "处理完"
                    : scope.row.caseStatus == "2"
                    ? "废弃"
                    : "待处理"
                }}
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="background-color: #6090ec; color: #fff"
                @click="Workorderdetails(scope.row, '0')"
                >详情</el-button
              >
              <el-button
                size="mini"
                style="background-color: #6090ec; color: #fff"
                @click="Workorderdetails(scope.row, '1')"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>

    <!-- 新建工单 -->
    <el-dialog
      title="渎失职工单"
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      width="80%"
      center
    >
      <!-- 上部分 -->
      <div class="body">
        <!-- 第一行 -->
        <div class="rowcss_e">
          <div class="colorCss">会员手机</div>
          <div class="nocolorCss">
            <el-input
              maxlength="11"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              size="mini"
              v-model.trim="customerPhone"
              placeholder="请输入手机号"
            ></el-input>
          </div>
          <div class="colorCss">会员卡号</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model.trim="cardNum"
              placeholder="请输入卡号"
            ></el-input>
          </div>
          <div class="colorCss">会员姓名</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model.trim="customerName"
              placeholder="请输入姓名"
            ></el-input>
          </div>
          <div class="colorCss">卡类型</div>
          <div class="nocolorCss">
            <el-select
              clearable
              size="mini"
              v-model="cardType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cardTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <el-button size="mini" type="primary" @click="getcustomerId"
            >查询</el-button
          >
        </div>

        <!-- 第二行 -->
        <div class="rowcss_e">
          <div class="colorCss">工单类型：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="ticketType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in workOrderType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单分类</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              clearable
              v-model="caseTypeId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orderLedger"
                :key="item.value"
                :label="item.caseTypeName"
                :value="item.caseTypeId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单小类：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="caseSubType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in workOrderTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">期望完成时间：</div>
          <div class="nocolorCss">
            <el-date-picker
              size="mini"
              v-model="dateTime"
              type="datetime"
              placeholder="选择日期时间"
              :value-format="format1"
            >
            </el-date-picker>
          </div>
          <div class="colorCss">工单标题：</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model.trim="caseSubject"
              placeholder="请输入工单标题"
            ></el-input>
          </div>
          <div class="colorCss">工单内容：</div>
          <div class="nocolorCss every">
            <el-input
              size="mini"
              v-model.trim="caseContent"
              placeholder="请输入工单内容"
            ></el-input>
          </div>
          <div class="colorCss">涉及业务类型：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="orderType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in businessList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">涉及订单号：</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              placeholder="请输入订单号"
              v-model.trim="involvingOrderNum"
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            ></el-input>
          </div>
          <div class="colorCss">涉及投诉点</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              v-model="complaintPoint"
              placeholder="请输入涉及投诉点"
            ></el-input>
          </div>
          <!-- <div class="colorCss">创建部门：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model.trim="receivingDepartment"
              placeholder="请选择"
              clearable
              @change="selectDept()"
            >
              <el-option
                v-for="item in departmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">创建人：</div>
          <div class="nocolorCss">
            <el-select size="mini" v-model="receiver" placeholder="请选择">
              <el-option
                v-for="(item, index) in postslists"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div> -->
          <div class="colorCss">投诉类型：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="complaintClassification"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in complainClassifyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">责任部门:</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="department"
              placeholder="请选择"
              @change="selectDepart()"
              clearable
            >
              <el-option
                v-for="item in departmentListCopy"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">被投诉人：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="complaintEmployeeid"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in postslistsCopy"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">责任部门是否确认</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="departmentConfirm"
              placeholder="请选择"
            >
              <el-option :value="true" label="是"></el-option>
              <el-option :value="false" label="否"></el-option>
            </el-select>
          </div>
          <div class="colorCss">员工承担总额：</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              placeholder="请输入员工承担金额"
              v-model.trim="employeeAmount"
              onkeyup="value=value.replace(/[^\d]/g,' ')"
            ></el-input>
          </div>
          <div class="colorCss">公司承担：</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              placeholder="请输入公司承担"
              v-model.trim="companyUndertakes"
              onkeyup="value=value.replace(/[^\d]/g,' ')"
            ></el-input>
          </div>
          <div class="colorCss">扣除员工绩效:</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              placeholder="请输入扣除员工绩效"
              v-model.trim="deductAmount"
              onkeyup="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </div>
          <div class="colorCss">连带上级：</div>
          <div class="nocolorCss">
            <!-- <el-select
              size="mini"
              style="200px"
              v-model="superior"
              placeholder="请选择"
              clearable
            >
              <el-option label="是" value="true"></el-option>
              <el-option label="否" value="false"></el-option>
            </el-select> -->
             <el-select
              size="mini"
              v-model="superior"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in postslistsCopy"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">扣除连带上级绩效:</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              placeholder="请输入扣除连带上级绩效"
              v-model.trim="superiorAmount"
              οnkeyup="value=value.replace(/[^\d]/g,' ')"
            ></el-input>
          </div>
          <div class="colorCss">是否撤销：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="cancel"
              placeholder="请选择"
              clearable
            >
              <el-option :value="true" label="是"></el-option>
              <el-option :value="false" label="否"></el-option>
            </el-select>
          </div>
          <div class="colorCss">处理结果 :</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              placeholder="请输入处理结果"
              v-model="processResult"
            ></el-input>
          </div>
          <div class="colorCss">投诉性质：</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="natureComplaint"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in propertyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">核实情况：</div>
          <div class="nocolorCss every">
            <el-input
              placeholder="请输入核实情况"
              size="mini"
              v-model="verifySituation"
            ></el-input>
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <!-- 核实情况 -->

      <!-- 下部分 -->
      <div class="body-bottom">
        <div style="display: flex">
          <div class="tdboder tousucss">投诉结果 :</div>
          <div class="tdboder">
            <div style="height: 190px"></div>
            <el-select
              size="mini"
              v-model="compensationType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in fruitList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="tdboder" style="width: 90%">
            <div style="margin: 12px">
              <div class="serviceCompensation" style="display: flex">
                <div class="service-left">服务赔偿</div>
                <div class="service-right">赔偿金额</div>
              </div>
              <div
                class="serviceCompensation-bottom"
                style="display: flex"
                v-for="(item, index) in compensateType"
                :key="index"
              >
                <div class="service-left">
                  <el-checkbox @change="changeList(item.reimbTypeId)">{{
                    item.reimbType
                  }}</el-checkbox>
                </div>
                <div class="service-right">
                  <el-input
                    size="mini"
                    @input="compensationAmountList"
                    v-model="compensationAmounts[index]"
                    placeholder="请输入金额"
                  ></el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="colorCss">相关凭证/录音</div>
        <div class="upload">
          <el-upload
            action="/file/fileMapping/uploadAvatarWorkOrder"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="successpickcherone"
            :headers="headers"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </div>
      <div style="margin: 20px 0 20px 45%">
        <el-button
          v-if="!this.cardTypeId"
          @click="getbackGuaranteeCase"
          type="primary"
          >保存</el-button
        >
        <el-button @click="centerDialogVisible = false" type="primary"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 渎失职工单详情 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisibledet"
      :close-on-click-modal="false"
      width="80%"
      center
      :close="closediali()"
    >
      <div class="body">
        <div class="title">工单详情</div>
        <div class="rowcss_e">
          <div class="colorCss">会员手机</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.memberCellPhone"
              placeholder="请输入姓名"
            ></el-input>
          </div>
          <div class="colorCss">会员卡号</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.guaranteeCase.memberCardNumber"
              placeholder="请输入卡号"
            ></el-input>
          </div>
          <div class="colorCss">会员姓名</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.memberName"
              placeholder="请输入姓名"
            ></el-input>
          </div>
          <div class="colorCss">卡类型</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.cardNumberType"
              placeholder="请输入卡号"
            ></el-input>
          </div>
          <!-- <div class="colorCss">紧急程度</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.guaranteeCase.emergencyLevel"
              placeholder="请选择"
            >
              <el-option
                v-for="item in LevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div> -->
          <div class="colorCss">工单类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.ticketType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in workOrderType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">工单小类</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.workOrderSubclass"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cardTypeList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">涉及订单号</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.orderId"
              placeholder="请输入订单号"
            ></el-input>
          </div>
          <div class="colorCss">工单标题</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.ticketTitle"
              placeholder="请输入卡号"
            ></el-input>
          </div>
          <div class="colorCss">工单内容</div>
          <div class="nocolorCss every">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.workOrderContent"
              placeholder="请输入卡号"
            ></el-input>
          </div>
          <div class="colorCss">涉及业务类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.businessType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in businessList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">期望完成时间</div>
          <div class="nocolorCss">
            <el-date-picker
              :value-format="format1"
              size="mini"
              v-model.trim="malfeasance.guaranteeCase.specifiedTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
          <div class="colorCss">创建部门</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              :disabled="title == '渎失职工单编辑'"
              v-model.trim="malfeasance.guaranteeCase.receiveDepartmentId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in departmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">创建人</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.employeeId"
              :disabled="title == '渎失职工单编辑'"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in postslists"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="title">渎失职工单</div>
        <div class="rowcss_e">
          <div class="colorCss">投诉类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.malfeasancetype"
              placeholder="请选择"
            >
              <el-option
                v-for="item in complainClassifyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">责任部门</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.department"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in departmentList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">被投诉人</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.complaintEmployeeid"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in postslists"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">责任部门是否确认</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.departmentConfirm"
              placeholder="请选择"
            >
              <el-option label="是" value="true"></el-option>
              <el-option label="否" value="false"></el-option>
            </el-select>
          </div>
          <div class="colorCss">会员卡号</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.memberCardNumber"
              placeholder="请输入会员卡号"
            ></el-input>
          </div>
          <div class="colorCss">姓名</div>
          <div class="nocolorCss">
            <el-input
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.memberName"
              placeholder="请输入姓名"
            ></el-input>
          </div>
          <div class="colorCss">注册手机号</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              :disabled="title == '渎失职工单编辑'"
              v-model="malfeasance.guaranteeCase.memberCellPhone"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cardTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">涉及业务类型</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.businessType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in businessList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="colorCss">涉及投诉点</div>
          <div class="nocolorCss every">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.complaintPoint"
              placeholder="请输入涉及投诉点"
            ></el-input>
          </div>
          <div class="colorCss">涉及订单号</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.orderId"
              placeholder="请输入涉及订单号"
            ></el-input>
          </div>
          <!-- <div class="colorCss">损失金额</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.cash"
              placeholder="请输入损失金额"
            ></el-input>
          </div> -->
          <div class="colorCss">员工承担总金额</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.malfeasanceMoney"
              placeholder="请输入员工承担总金额"
            ></el-input>
          </div>
          <div class="colorCss">公司承担</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.companyMoney"
              placeholder="请输入公司承担"
            ></el-input>
          </div>
          <div class="colorCss">扣除员工绩效金额</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.takeoffEmployee"
              placeholder="请输入扣除员工绩效金额"
            ></el-input>
          </div>
          <div class="colorCss">是否连带上级</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.superior"
              placeholder="请选择"
            >
              <el-option label="否" value="false"></el-option>
              <el-option label="是" value="true"></el-option>
            </el-select>
          </div>
          <div class="colorCss">扣除连带上级绩效金额</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              placeholder="请输入扣除连带上级绩效金额"
              v-model="malfeasance.takeoffSuperior"
            ></el-input>
          </div>
          <div class="colorCss">是否撤销</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              v-model="malfeasance.cancel"
              placeholder="请选择"
            >
              <el-option label="否" value="false"></el-option>
              <el-option label="是" value="true"></el-option>
            </el-select>
          </div>
          <div class="colorCss">处理结果</div>
          <div class="nocolorCss">
            <el-input
              onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
              size="mini"
              v-model="malfeasance.resolutionDetails"
              placeholder="请输入扣除连带上级绩效金额"
            ></el-input>
          </div>
          <div class="colorCss">投诉性质</div>
          <div class="nocolorCss">
            <el-select
              size="mini"
              style="200px"
              v-model="natureComplaint"
              placeholder="请选择"
              clearable
            >
              <el-option label="有效" value="true"></el-option>
              <el-option label="无效" value="false"></el-option>
            </el-select>
          </div>
          <div class="colorCss">核实情况：</div>
          <div class="nocolorCss">
            <el-input
              placeholder="请输入核实情况"
              size="mini"
              v-model="malfeasance.malfeasanceContent"
            ></el-input>
          </div>
          <div class="colorCss">状态</div>
          <div class="nocolorCss">
            <el-select
              clearable
              v-model="malfeasance.guaranteeCase.workOrderStatus"
              size="mini"
              placeholder="请选择"
            >
              <el-option label="处理完" value="1"></el-option>    
              <el-option label="待处理" value="0"></el-option>        
              <el-option label="废弃" value="2"></el-option>            
            </el-select>
          </div>
          <div class="colorCss">相关凭证/录音</div>
          <div class="upload">
            <el-upload
              action="/file/fileMapping/uploadAvatarWorkOrder"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="successpickchertwo"
              :multiple="false"
              :headers="headers"
              :file-list="certAfter"
              :on-remove="onRemoves"
              :limit="1"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>
        <div class="btn">
          <el-button
            style="margin: 10px 0 0 45%"
            type="primary"
            @click="centerDialogVisibledet = false"
            >取消</el-button
          >
          <el-button
            v-if="title == '渎失职工单编辑'"
            style="margin: 10px 0 0 45%"
            type="primary"
            @click="gettransferCount()"
            >转移</el-button
          >
          <el-button
          v-if="title == '渎失职工单编辑'"
            @click="abandoned"
            type="primary"
            style="margin: 10px 0 0 45%"
            size="mini"
            >处理
              </el-button>
          <el-button
            v-if="title == '渎失职工单编辑'"
            style="margin: 10px 0 0 45%"
            type="primary"
            @click="getmalfeasanceEdit()"
            >保存</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 工单转移 -->
    <el-dialog
      title="工单管理-工单转移"
      :visible.sync="transfer"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="add">
        <div class="header-1">
          <div class="header-1-1-1">
            <div class="tou"></div>
            <span>工单转移</span>
          </div>
        </div>
        <el-form
          style="margin-left: 20px"
          size="mini"
          :inline="true"
          :data="malfeasance"
          :model="malfeasance"
          class="pop"
        >
          <div class="pop-2">
            <div class="pop-1">
              <div class="invoice-1">
                <span class="invoice-9">接收人</span>
                <el-select
                  v-model="employeeId"
                  size="mini"
                  style="width: 120px"
                  clearable
                >
                  <el-option
                    v-for="item in postslists"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="pop-3">
            <el-button
              style="color: #fff; width: 66px"
              size="mini"
              type="primary"
              @click="WorkersChanBaoCun()"
              >保存
            </el-button>
            <el-button
              @click="transfer = false"
              style="color: #fff; width: 66px"
              size="mini"
              type="primary"
              >取消
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "caseMalfeasance",
  data() {
    return {
      transfer:false,
      employeeId: "",
      title: "渎失职工单详情",
      malfeasance: {
        guaranteeCase: {},
      },
      cardTypeId: "",
      // 分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      headers: {
        type: "workOrder",
      },
      // // 查询
      Thequery: {
        caseId: "",
        caseStatus: "",
        afterTime: "",
        agoTime: "",
        orderId: "",
        orderType: "",
        customerId: "",
        phone: "",
      },
      centerDialogVisibledet: false,
      // 时间
      CX: {
        date1: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
          .toLocaleDateString()
          .replace(/\//g, "-"), //   日期时间
        date2: new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
      },
      // 弹窗显示
      centerDialogVisible: false,
      dialogImageUrl: "",
      // endDateOpt: {
      //       disabledData: (time) => {
      //           return time.getTime() < this.CX.date1;
      //       }
      //   },
      // 卡类型下拉菜单
      cardTypeList: [
        {
          value: "experience",
          label: "体验会员",
          id: "1",
        },
        {
          value: "silver",
          label: "白银会员",
          id: "2",
        },
        {
          value: "gold",
          label: "黄金会员",
          id: "3",
        },
        {
          value: "healthy",
          label: "黑金会员·健康卡",
          id: "4",
        },
        {
          value: "travel",
          label: "黑金会员·出行卡",
          id: "5",
        },
      ],
      cardType: "", //卡类型
      // 投诉结果列表
      fruitList: [
        {
          value: "service",
          label: "服务赔偿",
        },
        {
          value: "cash",
          label: "现金赔偿",
        },
        {
          value: "check",
          label: "退卡",
        },
      ],
      LevelList: [
        {
          value: "0",
          label: "普通",
        },
        {
          value: "1",
          label: "紧急",
        },
        {
          value: "check",
          label: "退卡",
        },
      ],
      compensationType: "", //投诉结果方式
      // 投诉分类列表
      complainClassifyList: [
        {
          value: "personalNegligence",
          label: "个人失职",
        },
        {
          value: "personalError",
          label: "个人失误",
        },
        {
          value: "highCustomerRequirements",
          label: "客户高要求",
        },
        {
          value: "policyProcess",
          label: "政策流程",
        },
        {
          value: "partner",
          label: "合作商",
        },
        {
          value: "maintenance",
          label: "系统故障/维护",
        },
        {
          value: "overallService",
          label: "整体服务",
        },
        {
          value: "other",
          label: "其他",
        },
      ],

      // 赔偿金额
      compensationAmounts: [],
      // 是否撤销列表
      // isrevokeList: [
      //   {
      //     value: true,
      //     label: "是",
      //   },
      //   {
      //     value: false,
      //     label: "否",
      //   },
      // ],
      // 凭证录音
      documentVoList: [],
      // {
      //     type: "workOrder",
      //     url: "",
      //   },

      // 性质是否有效列表
      propertyList: [
        {
          value: "true",
          label: "有效",
        },
        {
          value: "false",
          label: "无效",
        },
      ],
      // 工单小类列表
      workOrderTypeList: [],
      // 工单小类数据
      workOrderType: [],
      // 部门列表
      departmentList: [],
      departmentListCopy: [],
      // 工单小类数据
      caseSubType: "",
      ticketType: "",

      // 部门id
      deplt: "",
      // 人员下拉
      postslists: [],
      postslistsCopy: [],
      // 涉及业务类型
      businessList: [
        {
          value: "flight",
          label: "国内机票",
        },
        {
          value: "train",
          label: "火车票",
        },
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "service",
          label: "贵宾厅",
        },
        {
          value: "VIPAisle",
          label: "vip通道",
        },
        {
          value: "checkIn",
          label: "值机",
        },
        {
          value: "customer",
          label: "会员",
        },
      ],
      // 订单类型
      mold: [
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "flight ",
          label: "机票",
        },
        {
          value: "service ",
          label: "贵宾厅",
        },
        {
          value: "train ",
          label: "火车票",
        },
        {
          value: "customer ",
          label: "会员",
        },
      ],
      // 状态待处理 = 0,处理完 = 1,
      condition: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "处理完",
        },
        {
          value: 2,
          label: "废弃",
        },
      ],
      // 工单列表
      Therepairorder: [],
      orderLedger: [],
      caseTypeId:'',// 工单分类
      cardNum: "", //卡号
      customerName: "", //会员姓名
      customerPhone: "", //会员手机昊
      caseSubject: "", //工单标
      caseContent: "", //工单内容
      receiver: "", //接受人
      complaintEmployeeid: "", //被投诉人
      receivingDepartment: "", //创建部门
      // 渎失职工单参数
      complaintClassification: "", //投诉分类
      orderType: "", //涉及类型
      involvingOrderNum: "", //涉及订单号
      complaintPoint: "", // 涉及投诉点内容
      verifySituation: "", //核实情况
      employeeAmount: "", //员工承担金额
      companyUndertakes: "", //公司承担
      natureComplaint: "", //投诉性质
      processResult: "", //处理结果
      orderId: "",
      // 责任人
      department: "", //责任部门
      deductAmount: "", //扣除员工绩效金额
      superiorAmount: "", //扣除连带上级绩效金额
      departmentConfirm: false, //责任部门是否确认
      cancel: false, //是否撤销
      superior: "",
      // 赔偿类型
      serviceCompensation: "", //服务赔偿
      compensationAmount: "", //赔偿金额
      dateTime: "", //期望完成时间
      fileUrl: [],
      certAfter: [], // 录音文件回显数组
      dialogVisible: false,
      // 赔偿方式
      compensateType: [],
      format: "yyyy-MM-dd",
      format1: "yyyy-MM-dd hh:mm:ss",
      workOrderType: [
        {
          value: "derelictionDuty",
          label: "渎失职",
        },
      ],
    };
  },
  // watch: {
  //   department(nV, oV) {
  //     this.deplt = nV;
  //     console.log(this.deplt);
  //     this.department = "";
  //     this.postslist();
  //   },
  // },
  methods: {
    closediali() {
      // this.centerDialogVisibledet = false
    },
    // 新增按钮
    centerDiaadde() {
      (this.customerPhone = ""),
        (this.cardNum = ""),
        (this.customerName = ""),
        (this.cardType = ""),
        (this.caseSubType = ""),
        (this.ticketType = ""),
        (this.caseSubject = ""),
        (this.fileUrl = []),
        (this.caseContent = ""),
        (this.dateTime = ""),
        (this.receiver = ""),
        (this.complaintEmployeeid = ""),
        (this.receivingDepartment = ""),
        (this.complaintClassification = ""),
        (this.orderType = ""),
        (this.involvingOrderNum = ""),
        (this.verifySituation = ""),
        (this.employeeAmount = ""),
        (this.companyUndertakes = ""),
        (this.natureComplaint = ""),
        (this.processResult = ""),
        (this.department = ""),
        (this.complaintEmployeeid = ""),
        (this.deductAmount = ""),
        (this.department = ""),
        (this.superiorAmount = ""),
        (this.cancel = ""),
        (this.serviceCompensation = ""),
        (this.compensationAmount = ""),
        (this.dateTime = ""),
        (this.cardTypeId = "");
      (this.complaintPoint = ""),
        (this.departmentConfirm = ""),
        (this.superior = ""),
        (this.fileUrl = []),
        (this.compensationType = ""),
        (this.centerDialogVisible = true);
    },
    onSubmit() {},
    // 详情
    Workorderdetails(row, val) {
      console.log(row)
      val == "1"
        ? (this.title = "渎失职工单编辑")
        : (this.title = "渎失职工单详情");

      console.log(row);
      this.certAfter = [];
      this.$axios
        .getmalfeasanceById({
          malfeasanceId: row.caseMalfeasanceId,
        })
        .then((res) => {
          if (res.code == "200") {
            this.centerDialogVisibledet = true;
            // this.malfeasance = res.data;
            this.orderType = orderId
this.malfeasance.guaranteeCase.receiveDepartmentId = res.data.department
            let obj = {
              name: "",
              url: res.data.fileUrl,
            };
            this.certAfter.push(obj);
            console.log(this.malfeasance, this.certAfter);
          }
        });
    },
    // 工单分类列表
    getlists() {
      this.$axios.getlists({}).then((res) => {
        if (res.code == "200") {
          console.log(res);
          this.orderLedger = res.data;
        }
      });
    },
    gettransferCount() {
      this.transfer = true;
      console.log(this.malfeasance);
    },
    // 工单转移
    WorkersChanBaoCun() {
      let arr = {
        ids: [this.malfeasance.caseId],
        employeeId: Number(this.employeeId),
      };
      if (this.employeeId != null) {
        localStorage.setItem("isToken", true);
        this.$axios.gettransferCount(arr).then((res) => {
          
          console.log(res);
          if (res.code == 200) {
            this.transfer = false;
            this.centerDialogVisibledet = false;
            this.getbackGuaranteeCaseById();
            this.$message({
              message: res.data[0].msg,
              type: "success",
            });
          } else {
            this.$message({
              message: "转移失败！！！！！",
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "请选择转移人员",
          type: "warning",
        });
      }
    },
    // 查询工单
    getbackGuaranteeCaseById() {
      this.$axios
        .getbackGuaranteeCaseById({
          caseId: this.Thequery.caseId,
          caseStatus: this.Thequery.caseStatus,
          afterTime: this.CX.date1 ? this.CX.date1 : "",
          agoTime: this.CX.date2 ? this.CX.date2 : "",
          orderId: this.Thequery.orderId,
          orderType: this.Thequery.orderType,
          customerId: this.Thequery.customerId,
          phone: this.Thequery.phone,
          type: "derelictionDuty",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // if(res.data.length<1) {
            //   this.$message({
            //     message: '暂无数据',
            //     type: 'warning'
            //   });
            //   this.Therepairorder = []
            // } else {
            //   this.$message({
            //     message: '查询成功',
            //     type: 'success'
            //   });
            // 工单列表数据
            this.Therepairorder = res.data;
            this.pageTotal = res.total;
            console.log(this.Therepairorder);
            // }
          }
        });
    },
    // 查会员信息
    getcustomerId() {
      if (
        this.customerName != "" ||
        this.cardNum != "" ||
        this.customerPhone != ""
      ) {
        this.$axios
          .getcustomerId({
            customerName: this.customerName,
            customerCard: this.cardNum,
            customerPhone: this.customerPhone,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.customerName = res.data.customerName;
              this.cardNum = res.data.customerCard;
              this.customerPhone = res.data.customerPhone;
              this.cardType = res.data.level;
            } else {
              this.$message({
                showClose: true,
                message: "查询错误",
                type: "error",
              });
            }
          });
      } else {
        this.$message({
          showClose: true,
          message: "会员姓名，手机号，卡号任选其一必填",
          type: "error",
        });
      }
    },
    // 赔偿金额事件
    compensationAmountList(row) {
      // console.log(row)
      this.compensationAmount = row;
    },
    // 服务赔偿事件
    changeList(row) {
      // console.log(row);
      this.serviceCompensation = row;
    },
    // 接收部门
    geteedepartmentlist() {
      this.$axios
        .geteedepartmentlist({
          deptId: "",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.departmentList = list.map((item) => {
              return { label: item.deptName, value: item.deptId };
            });
            console.log(this.departmentList);
          }
        });
    },
    geteedepartmentlistCopy() {
      this.$axios
        .geteedepartmentlist({
          deptId: "",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.departmentListCopy = list.map((item) => {
              return { label: item.deptName, value: item.deptId };
            });
            console.log(this.departmentListCopy);
          }
        });
    },
    // 通过选中部门查询该部门下员工
    selectDept() {
      console.log(this.receivingDepartment);
      this.postslist();
    },
    selectDepart() {
      console.log(this.department);
      this.postslistCopy();
    },
    // 工单小类
    getselectworkOrderType() {
      // debugger
      this.$axios
        .getselectworkOrderType({
          // caseTypeId:"derelictionDuty"
          caseTypeId: "1",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            let list1 = [];
            list1 = list.filter((item) => {
              return item;
            });
            console.log(list1);
            this.workOrderTypeList = list1.map((item) => {
              if (item == null) {
              } else {
                return {
                  label: item.workOrderType,
                  value: String(item.caseSubTypeId),
                };
              }
            });
            console.log(this.workOrderTypeList);
          }
        });
    },
    // 连带人员搜索员工
    postslist() {
      localStorage.removeItem("pageSize");
      localStorage.removeItem("pageNum");
      this.$axios
        .postslist({
          deptId: this.receivingDepartment,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            localStorage.setItem("pageSize", 10);
            localStorage.setItem("pageNum", 1);
            let list = JSON.parse(JSON.stringify(res.data));
            this.postslists = list.map((item) => {
              return { label: item.employeeName, value: item.employeeId };
            });
            console.log(this.postslists);
          }
        });
    },
    postslistCopy() {
      localStorage.removeItem("pageSize");
      localStorage.removeItem("pageNum");
      this.$axios
        .postslist({
          deptId: this.department,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            localStorage.setItem("pageSize", 10);
            localStorage.setItem("pageNum", 1);
            let list = JSON.parse(JSON.stringify(res.data));
            this.postslistsCopy = list.map((item) => {
              return {
                label: item.employeeName,
                value: String(item.employeeId),
              };
            });
          }
        });
    },
    // 根据职位id搜索员工
    getEmployeeByPosition(row) {
      this.$axios
        .getEmployeeByPosition({
          positionId: row,
        })
        .then((res) => {
          console.log(res);
          // if (res.code == "200") {
          //   let list = JSON.parse(JSON.stringify(res.data));
          //   this.postslists = list.map((item) => {
          //     return { label: item.employeeName, value: item.employeeId };
          //   });
          //   console.log(this.postslists);
          // }
        });
    },
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url;
      // this.imageUrl = URL.createObjectURL(file.raw);
      // this.dialogVisible = true;
    },
    // 图片上传成功
    successpickcherone(row) {
      console.log(row)
      this.fileUrl.push(row[0]);
      console.log(this.fileUrl);
    },
    successpickchertwo(row) {
      console.log(row)
      let obj = {
        name: "",
        url: row[0],
      };
      this.certAfter.push(obj);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    onRemoves(file, fileList) {
      this.certAfter.splice(0, 1);
    },
    // 读失职接口
    getbackGuaranteeCase() {
      let responsibleVoList = [];
      let obj = {
        deductAmount: this.deductAmount, //扣除员工绩效金额
        superiorAmount: this.superiorAmount, //扣除连带上级绩效金额
      };
      responsibleVoList.push(obj);
      localStorage.setItem("isToken", true);
      if (
        this.caseSubType != "" &&
        this.ticketType != "" &&
        this.cardNum != "" &&
        this.customerName != "" &&
        this.customerPhone != "" &&
        this.dateTime != "" &&
        this.caseContent != "" &&
        this.compensationAmount != "" &&
        this.serviceCompensation != ""
      ) {
        // this.dateTime =
        let derelictionDutyVo = {
          complaintClassification: this.complaintClassification, //投诉分类
          orderType: this.orderType, //涉及业务类型
          involvingOrderNum: this.involvingOrderNum, //涉及订单号
          verifySituation: this.verifySituation, //核实情况
          employeeAmount: this.employeeAmount, //员工承担总额
          companyUndertakes: this.companyUndertakes, //公司承担
          natureComplaint: this.natureComplaint, //投诉性质
          processResult: this.processResult, //处理结果
          documentVoList: this.documentVoList,
          responsibleVoList: responsibleVoList,
          cancel: this.cancel, //是否撤销
          departmentConfirm: this.departmentConfirm,
          department: this.department,
          complaintPoint: this.complaintPoint,
          complaintEmployeeid: this.complaintEmployeeid, //被投诉人
          fileUrl: this.fileUrl[0],
          superior: this.superior,
          takeoffEmployee: this.deductAmount,
          deductAmount: this.deductAmount, //扣除员工绩效金额
          department: this.department, //连带上级
          penalty: this.natureComplaint,
          takeoffSuperior: this.superiorAmount,
          superiorAmount: this.superiorAmount, //扣除连带上级绩效金额
          complaintOutcomeVo: {
            compensationType: this.compensationType, //赔偿类型
            compensationVoList: [
              {
                serviceCompensation: this.serviceCompensation, //服务赔偿
                compensationAmount: this.compensationAmount, //赔偿金额
              },
            ],
          },
        };
        console.log(this.receiver, derelictionDutyVo, responsibleVoList);
        this.$axios
          .getbackGuaranteeCase({
            caseSubType: this.caseSubType,
            ticketType: this.ticketType,
            cardNum: this.cardNum, //会员卡号
            cardType:this.cardType,
            // caseTypeId: this.caseTypeId, // 工单分类
            customerName: this.customerName, //会员姓名
            customerPhone: this.customerPhone, //会员手机号
            specifiedTime: this.dateTime, //完成时间
            caseSubject: this.caseSubject, //工单标题
            caseContent: this.caseContent, //工单内容
            // receiver: this.receiver, //创建人
            // createEmployeeId: this.receiver, //创建人
            createEmployeeId: JSON.parse(localStorage.getItem('employeesInformation')).employeeId, //创建人
            count: this.count,
            responsibleDepartment:JSON.parse(localStorage.getItem('employeesInformation')).deptId,
            departId: this.receivingDepartment, //创建部门
            workOrderType: "derelictionDuty", //类型
            type: "Crm",
            derelictionDutyVo: derelictionDutyVo,
            orderId: String(this.involvingOrderNum),
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == "200") {
              (this.centerDialogVisible = false),
                this.getbackGuaranteeCaseById();
              this.$message({
                message: "保存成功",
                type: "success",
              });
            }
          });
      } else {
        this.$message.error("请输入正确的工单信息");
      }
    },
    abandoned() {
      this.malfeasance.guaranteeCase.workOrderStatus = 2
      this.getmalfeasanceEdit()
    },
    // 编辑保存接口
    getmalfeasanceEdit() {
      let fileUrl = this.certAfter[0].url;
      this.$axios
        .getmalfeasanceEdit({
          caseMalfeasanceId: this.malfeasance.caseMalfeasanceId,
          malfeasancetype: this.malfeasance.malfeasancetype,
          department: this.malfeasance.department,
          complaintEmployeeid: this.malfeasance.complaintEmployeeid,
          departmentConfirm: this.malfeasance.departmentConfirm,
          cash: this.malfeasance.cash,
          malfeasanceMoney: this.malfeasance.malfeasanceMoney,
          companyMoney: this.malfeasance.companyMoney,
          takeoffEmployee: this.malfeasance.takeoffEmployee,
          takeoffSuperior: this.malfeasance.takeoffSuperior,
          superior: this.malfeasance.superior,
          cancel: this.malfeasance.cancel,
          resolutionDetails: this.malfeasance.resolutionDetails,
          malfeasanceContent: this.malfeasance.malfeasanceContent,
          fileUrl: fileUrl,
          guaranteeCase:{
            caseId:this.malfeasance.caseId,
            workOrderStatus:this.malfeasance.guaranteeCase.workOrderStatus,
            memberCardNumber: this.malfeasance.guaranteeCase.memberCardNumber,
            memberName: this.malfeasance.guaranteeCase.memberName,
            memberCellPhone: this.malfeasance.guaranteeCase.memberCellPhone,
            orderType: this.malfeasance.guaranteeCase.orderType,
            complaintPoint: this.malfeasance.guaranteeCase.complaintPoint,
            orderId: this.malfeasance.guaranteeCase.relevantOrderNumber,
          }
          // resolutionDetails: this.malfeasance.resolutionDetails,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.centerDialogVisibledet = false;
            this.getbackGuaranteeCaseById();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 毒失职赔偿列表
    getcaseReimbTypeList() {
      this.$axios.getcaseReimbTypeList({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.compensateType = res.data;
        }
      });
    },

    //分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.getbackGuaranteeCaseById();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);

      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.getbackGuaranteeCaseById();
      // orders = res.data;
    },

    search() {
      localStorage.setItem("pageNum", this.currentPage);
      localStorage.setItem("pageSize", 10);
      this.getbackGuaranteeCaseById();
    },
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('employeesInformation')) )
    console.log(this.$route.query)
    if(this.$route.query.row) {
      this.Workorderdetails(this.$route.query.row,this.$route.query.val)
    }
    // 工单小类
    this.getselectworkOrderType();
    // 部门
    this.geteedepartmentlist();
    this.geteedepartmentlistCopy();
    // 连带人员
    this.postslist();
    // 毒失职赔偿列表
    this.getcaseReimbTypeList();
    // 列表
    this.getbackGuaranteeCaseById();
    // 工单分类
    this.getlists()
   
  },
};
</script>

<style scoped>
.body-top {
  width: 95%;
  height: 140px;
  border: 0.5px solid #add8ea;
}
.body-bottom {
  width: 97.4%;
  border: 0.5px solid #add8ea;
}

.tdboder {
  border: 0.5px solid #add8ea;
}
.td-1 {
  width: 150px;
  background-color: #f2f7fa;
}
.selection {
  display: flex;
  width: 500px;
  margin: auto;
  margin-top: 10px;
}
.tousucss {
  width: 100px;

  line-height: 400px;
}
.serviceCompensation {
  width: 700px;
  background-color: #bbd9e6;
  border: 1px solid #3f7e99;
}
.serviceCompensation-bottom {
  width: 700px;
  border: 1px solid #3f7e99;
  border-top: 0px solid #3f7e99;
}
.service-left {
  margin-left: 10px;
  width: 350px;
  border-right: 1px solid #488ba8;
}
.service-right {
  width: 350px;
  text-align: center;
}
.colorCss {
  background-color: #e8f3f7;
  width: 128px;
  height: 30px;
  line-height: 30px;
  border: 0.5px solid #add8ea;
  white-space: nowrap;
  /* padding: 0 20px; */
}
.upload {
  height: 148px !important;
}
.nocolorCss {
  width: 153px;
  height: 30px;
  line-height: 30px;
  border: 0.5px solid #add8ea;
}
.every {
  width: calc(100% - 444px) !important;
}
.everys {
  width: calc(100% - 314.5px) !important;
}
.table {

}
.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.header-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
}
.header-1-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  /* padding-top: 20px; */
}
.invoice {
  margin: auto;
  display: flex;

  margin-bottom: 20px;
  min-width: 1200px;
}
.invoice-1 {
  margin-right: 20px;
}
.invoice-2 {
  margin-left: 20px;
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.tuo {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
  justify-content: space-between;
  margin-right: 20px;
}
.invoice-9 {
  font-size: 11px;
}
.rowcss {
  display: flex;
}
.rowcss_e {
  display: flex;
  flex-wrap: wrap;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 0px;
}
::v-deep .el-date-editor.el-input {
  width: 151px;
}
.title {
  line-height: 36px;
  font-size: 20px;
  color: #000;
}
.con_box {
  width: 295px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 62px;
  margin-left: 23px;
}
.title_l {
  width: 214px;
}
.pop-3 {
  margin-left: 20px;
  margin-top: 40px;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.btn {
  display: flex;
  width: 81px;
  text-align: center;
  margin: 0 auto;
}
</style>

